<?php $activePage = "others"; ?>
<?php include("includes/header.php"); ?>	
<!-- container -->
<div class="container">			
	<div class="row">
		<div class="g12">
			<h2 class="h2">Others</h2>
			<hr />
		</div>
	</div>

	<div class="row">
		<div class="g8">
			<h3 class="h3">Breadcrumbs</h3>
			<div class="row">
				<div class="g12">
					<div id="breadcrumb">
						<span class="breadcrumnPreTitle">You are in »</span>
						<div class="breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
							<a itemprop="url" href="/">
								<span itemprop="title">Home</span>
							</a> ›
						</div>
						<div class="breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
							<a itemprop="url" href="#">
								<span itemprop="title">Section</span>
							</a> ›
						</div>
						<div class="breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb" itemscope="">
							<a itemprop="url" href="#">
								<span itemprop="title">Article</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="g4">
			<h4 class="h4">Breadcrumbs info</h4>
			
			<ul class="disc">
				<li>
					This is the structure that google recommend for a breadcrumbs
				</li>
			</ul>
		</div>
	</div>
	<div class="row">
		<div class="g8">
			<h3 class="h3">Pagination</h3>
			<div class="row">
				<div class="g12">
					<div class="pagination">
						<ul>
							<li class="prev disabled"><a href="#">&laquo; Previous</a></li>
							<li class="active"><a href="#">1</a></li>
							<li><a href="#">2</a></li>
							<li><a href="#">3</a></li>
							<li><a href="#">4</a></li>
							<li><a href="#">5</a></li>
							<li class="next"><a href="#">Next &raquo;</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="g4">
			<h4 class="h4">Pagination info</h4>
			
			<ul class="disc">
				<li>
					Empty
				</li>
			</ul>
		</div>
	</div>
	<div class="row">
		<div class="g8">
			<h3 class="h3">Tooltips</h3>
			<div class="row">
				<div class="g12">
					<p><a href="#" title="Tooltip test">Tooltip test</a></p>
					
					
					
					
					<p><a href="#" title="este es el contenido de un tooltip básico estrecho. para usarlo hay que añadir data-tooltip_width='120' al trigger del tooltip" data-tooltip_width="160">Tooltip with a defined width</a></p>
					
					
					<a href="#" class="tooltipHtml">Tooltip width special HTML structure</a>
					<div style="width:80px;" class="tooltip">
						This is <strong>a tooltip width special HTML structure</strong>
					</div>
					
					<br/><br/>
					
					<a href="#" class="tooltipHtml tooltip_onStart">HTML Tooltip that is show on document ready</a>
					<div style="width:200px;" class="tooltip">
						This is <strong>a tooltip that is show on document ready.</strong><br/>
						To close it you must click con close link.
					</div>
					
						
					
				</div>
			</div>
		</div>

		<div class="g4">
			<h4 class="h4">Tooltips info</h4>
			
			<ul class="disc">
				<li>
					Empty
				</li>
			</ul>
		</div>
	</div>
	<div class="row">
		<div class="g8">
			<hr />
			<h3 class="h3">Images</h3>
			<div class="row">
				<div class="g2">
					<img src="images/test_180.jpg" />
				</div>
			</div>
			<div class="row">
				<div class="g4">
					<img src="images/test_800.jpg" />
				</div>
			</div>
			<div class="row">
				<div class="g8">
					<img src="images/test_800.jpg" />
				</div>
			</div>
			<div class="row">
				<div class="g12">
					<img src="images/test_800.jpg" />
				</div>
			</div>
		</div>

		<div class="g4">
			<h4 class="h4">Page info</h4>
			
			<ul class="disc">
				<li>
					Empty
				</li>
			</ul>
		</div>
	</div>
</div><!-- container -->		
<?php include("includes/footer.php"); ?>	